const Path = require('path'); //引入path模块
const HtmlWebPackPlugin = require('html-webpack-plugin'); //引入html-webpack-plugin模块
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入vue-loader插件
module.exports = {
    //打包的模式，默认有两种production（生产环境，会压缩代码）development（开发环境）
    mode: "development",
    //入口
    entry: './src/main.js',
    //输出相关
    output: {
        //打包后的文件名
        filename: "bundle.js",
        //打包后输出路径必须是一个绝对路径，使用node的path模块的resolve方法获得
        path: Path.resolve(__dirname, 'dist'),
    },
    devServer: { //开发（webpack-dev-server）服务器的配置
        //host:'192.168.0.108',
        port: 3000, //端口号
        progress: true, //进度条
        //默认进入的目录,它会默认打开里面的index.html来运行，此时								  	  http://localhost:3000/和http://localhost:3000/index.html 							  是一样的效果，如果想运行dist中其它html，只需要在后面更改文件名*/
        contentBase: './src',
        hot: true    //配置热更新，不用每次全部重新打包，值修改变动的内容
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html", //模板的路径
            filename: "index.html", //打包后的html名 （可选,默认为index.html）
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            { //普通css的规则
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            { //less的规则
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            { //scss的规则
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {  //图片url的规则
                test: /\.(png|jpeg|jpg|gif|bmp)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 2000,
                        name: '[name].[ext]'
                    }
                }
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                use:['url-loader']
            },
            { //配置babel规则
                test:/\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            //修改vue在导入包时的路径为一个功能完整版的vue.s
           // "vue$":"vue/dist/vue.js"
        }
    }
};
